<template>
  <div class="newsCenter">
    <Header @modify="modify" @naviBack="naviBack" :title="title" :flag="flag"></Header>
    <div class="modifyConter">
      <div class="userList flexs userTop">
        <div class="userTitle">
          头像
        </div>
        <div class="userAvater">
          <img :src=userListWrap.face alt="" class="userAvaterImg">
          <input class="choiseFile" name="face" id="img" type="file" ref="fileInput2" accept="image/jpg,image/jpeg,image/png"  multiple="" @input="choisePic">
        </div>
        <div class="iconfont icon-right1"></div>
      </div>
      <div class=" userList flexs"  >
        <div class="userTitle">
          用户名
        </div>
        <div class="usercen" >
          <a style="color: #cbcbcb;" >{{userListWrap.nickname}}</a>
        </div>
        <div class="iconfont icon-right1" @click.stop="changeName(userListWrap.nickname)"></div>
      </div>
      <div class=" userList flexs"  >
        <div class="userTitle">
          姓名
        </div>
        <div class="usercen" >
          <a style="color: #cbcbcb;" >{{userListWrap.username}}</a>
        </div>
        <!--<div class="iconfont icon-right1"></div>-->
      </div>
      <div class=" userList flexs"  >
        <div class="userTitle">
          公司名称
        </div>
        <div class="usercen" >
          <a style="color: #cbcbcb;" > {{userListWrap.company_name}}</a>
        </div>
      </div>
      <div class=" userList flexs"  >
        <div class="userTitle">
          党支部名称
        </div>
        <div class="usercen" >
          <a style="color: #cbcbcb;" > {{userListWrap.branchs_name}}</a>
        </div>
        <!--<div class="iconfont icon-right1" ></div>-->
      </div>
    </div>
    <!--<div class="js_dialog" id="androidDialog1" v-if="showalarm">-->
      <!--<div class="weui-mask"></div>-->
      <!--<div class="weui-dialog weui-skin_android">-->
        <!--<div class="weui-dialog__bd">-->
          <!--{{alarm}}-->
        <!--</div>-->
        <!--<div class="weui-dialog__ft">-->
          <!--<a href="javascript:;" class="weui-dialog__btn  weui-dialog__btn_primary weui_confim" style="color: #0bb20c;" @click.stop="confirm">确认</a>-->
        <!--</div>-->
      <!--</div>-->
    <!--</div>-->

    <div id="loadingToast" v-if="showLoading">
      <div class="weui-mask_transparent"></div>
      <div class="weui-toast">
        <i class="weui-loading weui-icon_toast"></i>
        <p class="weui-toast__content">附件上传中，请耐心等候...</p>
      </div>
    </div>

  </div>
</template>
<script>
  import * as qiniu from 'qiniu-js'
  import Header from './userheader.vue'
  import {mapState} from 'vuex'
  export default({
    data (){
      return {
        title:'个人信息',
        flag:false,
        showLoading:false,
        showalarm:false,
        token:'',
        alarm:'',
        userListWrap:{},
        userName:'hukai'

      }
    },
    computed:{
      ...mapState({
        uid: state=> state.app.loginState.uid||localStorage.getItem('uid')
      })
    },
    methods:{
      naviBack(){
        this.$router.go(-1)
      },
      modify (){

      },
      changeName(name){
          this.$router.push({
            name:'editor',
            query:{
                item:name
            }
          })
      },
      confirm(){
          this.showalarm =false
      },
      choisePic (){
        this.axios.get('/home/Qiniu/upload')
          .then((res)=>{
            this.token =res.data.token
            let that =this
            var files =this.$refs.fileInput2.files
            var url = window.URL || window.webkitURL || window.mozURL ;
            if(files[0]){
              if(files[0].size/1024>51200){
                this.showAlarm =true
                this.alarm='上传文件不得超过5M'
                return  false
              }
              var observable = qiniu.upload(files[0], null, this.token,null)
              var observer = {
                next(res){
                  console.log(res)
                },
                error(err){
                  console.log(err)

                },
                complete(res){
                  that.loading =false
                  var str ='http://oss.co-links.com/'+ res.hash+'#'
                  console.log(that.userListWrap)
                  that.userListWrap.face =str
                  that.axios.post('/home/User/editUserInfo',{
                      uid:this.uid||localStorage.getItem('uid'),
                      face:str,
                      type:3
                  })
                  .then((res)=>{
                    console.log(res)
                  }).catch((res)=>{
                      console.log(res.error)
                  })

                }
              }
              var subscription = observable.subscribe(observer) // 上传开始
            }

          })
      },
      initData(){
          this.axios.get('/home/User/getUserIndex',{
              params:{
                  uid:this.uid
              }
          })
            .then((res)=>{
              console.log(res.data)
              this.userListWrap =res.data.data.user
              console.log(this.userListWrap)
            })
      }
    },
    components:{
      Header
    },
    mounted(){
      this.initData()
    }
  })
</script>
<style scoped="">
  .newsCenter{
    background: #f6f6f6;
    height: 100%;
  }
  .modifyConter{
    margin-top: 0.36rem;
  }
  .flexs{
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center
  }
  .flex1{
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    min-width: 0;
  }

  .userList{
    padding: 0.2rem 0.32rem ;
    border-bottom: 2px solid #f6f6f6;
    justify-content: space-between;
    background: white;
  }
  .userList .userTitle{
    width: 1.6rem;
    font-size: 0.3rem;

  }
  .userList  .userAvater,.userList  .usercen{
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    min-width: 0;
    text-align: right;
    color: #cbcbcb;
    font-size: 0.26rem;
  }
  .userList  .userAvater img{
    width:1.06rem;
    height: 1.06rem;
    border-radius: 50%;
  }
  .userList .iconfont{
    width: 0.7rem;
    text-align: right;
    font-size: 0.36rem;
    color: #9e9e9e;
  }
  .userTop{
    margin-bottom: 0.12rem;
  }
  .loginOut{
    position: fixed;
    max-width: 750px;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 0.8rem;
    background: #e83329;
    line-height: 0.8rem;
    font-size: 0.32rem;
    color: white;
    text-align: center;
    margin: 0 auto;}
  .userAvater{
    position: relative;
  }
  .choiseFile{
    position: absolute;
    left: 0;
    top:0;
    width: 100%;
    height: 100%;
    opacity: 0;
    z-index: 2;
  }
</style>
